<template>
  <h1>我是计算属性组件</h1>
  <h1>{{ publicBook }}(yes:代表书架还有书，No：代表书架没书了)</h1>
  <button @click="edit">递增加 ！</button>
  <h2>language：{{ fullName }}</h2>
  <h1>当前时间：</h1>
  <h2>计算属性：{{ nowTime1 }}</h2>
  <h2>方法：{{ nowTime2() }}</h2>
</template>

<script setup>
import { ref, computed, reactive } from 'vue'

const author = reactive({
  type: 'study',
  book: [
    'xiangyang666',
    'zxycode.com',
    'vuejs.org'
  ]
})


const publicBook = computed(() => {
  return author.book.length > 0 ? 'Yes' : 'No'
})


// 可写计算属性
// 姓
const firstName = ref('Zhang')
// 名
const lastName = ref('Xiangyang')
// 全名
let fullName = computed({
  // 获取
  get() {
    return `${firstName.value}~~~${lastName.value}`
  },
  // 修改
  set(newValue) {
    console.log('kkkk', newValue)
    firstName.value = newValue
  }
})
// 一但改变fullName就会触发fullName里的set方法，从而修改数据
function edit() {
  // firstName.value = 'Li'
  fullName.value = 'Li'
}


// 当前时间
const nowTime1 = computed(() => Date.now())

function nowTime2() {
  return Date.now()
}
</script>

<style scoped></style>
